import React from 'react'
import { Table ,Popconfirm} from 'antd';

class Team extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            columns : [
                {
                    title: '姓名',
                    dataIndex: 'name',
                    key:1
                },
                {
                    title: '年龄',
                    dataIndex: 'age',
                    key:2
                },
                {
                    title: '电话',
                    dataIndex: 'phone',
                    key:3
                },
                {
                    title:'操作',
                    dataIndex:'del',
                    render: (text, record) =>
                    this.state.data.length >= 1 ? (
                        <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
                            <button>Delete</button>
                        </Popconfirm>
                    ) : null,
                }
            ],
            data : [
                {
                    name: 'xufba',
                    age: 18,
                    phone: 15515054914,
                    key:1
                },
                {
                    name: 'Jdgsybd',
                    age: 18,
                    phone: 15515054914,
                    key:2
                },
                {
                    name: 'Ybdsjak',
                    age: 18,
                    phone: 15515054914,
                    key:3
                },
                {
                    name: 'Ajbx',
                    age: 18,
                    phone: 15515054914,
                    key:4
                },
                {
                    name: 'llqg',
                    age: 18,
                    phone: 15515054914,
                    key:5
                },
                {
                    name: '7765',
                    age: 18,
                    phone: 15515054914,
                    key:6
                },
                {
                    name: '7765',
                    age: 18,
                    phone: 15515054914,
                    key:7
                },
                {
                    name: '7765',
                    age: 18,
                    phone: 15515054914,
                    key:8
                }
            ]
        }
    }

    handleDelete = key => {
        const dataSource = [...this.state.data];
        this.setState({ data: dataSource.filter(item => item.key !== key) });
        localStorage.setItem('data', JSON.stringify(this.state.data))
    }

    render(){
        return(
            <div>
                <Table 
                dataSource={this.state.data} 
                columns={this.state.columns} 
                pagination={{ pageSize:5}}
                />
                
            </div>
        )
    }

}
export default Team